<script setup>
import { defineComponent, ref, reactive, nextTick } from "vue";
import { useMessage, NForm, NFormItem, NInput, NButton } from "naive-ui";
import QRCode from "qrcode";
// vue2.0
// import VueQr from 'vue-qr'
// vue3.0
import VueQr from "vue-qr/src/packages/vue-qr.vue";
console.info(
  "%c二维码插件练习",
  "color: #3190e8; font-size: 30px; font-family: sans-serif"
);
const formRef = ref(null);
const imgsrc = ref("");
const formValue = reactive({
  user: {
    name: "ww",
    age: "12",
    phone: "12121",
    ss: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    ss2: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    ss3: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    ss4: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    ss5: "aaaaaaffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    ss5w: "aaaaaaffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    ss51: "aaaaaaffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    ss52: "aaaaaaffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    ss6: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas0",
    keke: "我是加ffffffffff哦加哦加哦就",
    keke2:
      "我是加哦加哦vvvvvvvvvvvvvvvvvvvvvvvv实打实打算大苏打实打实大苏打实打实的哇阿达哒哒哒撒大大实打实vvvvvvv加哦就",
    keke3: "我是加哦加哦加哦就",
    keke4:
      "我是加哦加哦fffffff撒旦撒大大十大的阿萨大大大叔打撒十大大苏打啊实打实大苏打阿萨啊实打实的啊大苏打fffffffffffffffffffffffff加哦就",
  },
});
const handleValidateClick = async (e) => {
  e.preventDefault();
  let data = JSON.stringify(formValue.user);

  // let weight = 100;
  // let height = 100;
  //   if(navigator.userAgent.indexOf('Andriod') !== -1){
  //   width = 100
  //   height = 100
  // }

  // imgsrc.value = `https://www.zhihu.com/?data=${data}`;


  QRCode.toDataURL(`https://www.zhihu.com/?data=${data}`, {//该文本串太长时，扫描生成的二维码会失败--》
    // weight:navigator.userAgent.indexOf('Andriod') !== -1 ? width : 100,//安卓兼容
    width: 300,
    height: 300,
  }).then((url) => {
    imgsrc.value = url;
    updateImg(url)
  });
};
const updateImg = (src) => {
  const fileName = "www" + "png";
  // let img = document.querySelector(".bicode").src;
  let img = src;
  let aLink = document.createElement("a");
  let blob = base64ToBlob(img);
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};
const base64ToBlob = (code) => {
  let parts = code.split(";base64,");
  let contentType = parts[0].split(":")[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;
  let uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
};
</script>

<template>
  <div class="main-box">
    <div style="margin-bottom: 20px;">qrcode的使用</div>
    <n-form ref="formRef" inline :label-width="80" :model="formValue">
      <n-form-item label="姓名" path="user.name">
        <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
      </n-form-item>
      <n-form-item label="年龄" path="user.age">
        <n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
      </n-form-item>
      <n-form-item label="电话号码" path="phone">
        <n-input v-model:value="formValue.user.phone" placeholder="电话号码" />
      </n-form-item>
      <n-form-item>
        <n-button attr-type="button" @click="handleValidateClick">
          提交
        </n-button>
      </n-form-item>
    </n-form>
    <!-- <vue-qr
      class="bicode"
      :text="imgsrc"
      size="300"
      margin=""
      backgroundColor="pink"
      backgroundDimming="red"
      logoSrc="https://www.naiveui.com/assets/naivelogo.93278402.svg"
    ></vue-qr> -->
    <img :src="imgsrc" />
  </div>
</template>

<style lang="less" scoped>
.main-box {
  // display: flex;
  .bicode {
    width: 200px;
    height: 200px;
  }
}
</style>
